<template>
  <div class="app-container">
    <el-form :model="queryParams"
             ref="queryForm"
             :inline="true"
             v-show="showSearch"
             size="small"
             label-width="88px">
      <el-form-item label="账单编号"
                    prop="billNum">
        <el-input v-model="queryParams.billNum"
                  placeholder="请输入账单编号"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="账单状态"
                    prop="billState">
        <el-select clearable
                   v-model="queryParams.billState"
                   placeholder="请选择账单状态">
          <el-option label="执行中"
                     value="0"> </el-option>
          <el-option label="已作废"
                     value="1"> </el-option>
          <el-option label="已过期"
                     value="2"> </el-option>

        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-button type="success"
                   plain
                   icon="el-icon-edit"
                   size="mini"
                   :disabled="single"
                   @click="handleUpdate"
                   v-hasPermi="['energy:sfBill:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"
                   plain
                   icon="el-icon-delete"
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['energy:sfBill:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning"
                   plain
                   icon="el-icon-download"
                   size="mini"
                   @click="handleExport"
                   v-hasPermi="['energy:sfBill:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch"
                     @queryTable="getList"></right-toolbar>
    </el-row>

    <el-tabs v-model="tabActiveName"  @tab-click="tabClick">
      <el-tab-pane label="未支付" name="1"></el-tab-pane>
      <el-tab-pane label="部分支付" name="2"></el-tab-pane>
      <el-tab-pane label="已支付" name="3"></el-tab-pane>
      <el-tab-pane label="全部" name="4"></el-tab-pane>
    </el-tabs>

    <el-table v-loading="loading"
              :data="feBillList"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"
                       align="center" />
      <el-table-column label="账单编号"
                       width="120"
                       align="center"
                       prop="billNum" />
      <el-table-column label="企业名称"
                       width="120"
                       show-overflow-tooltip
                       align="center"
                       prop="enterpriseName" />
      <el-table-column label="费用类型"
                       align="center"
                       prop="feeTypeName" />
      <el-table-column label="账单起始日期"
                       align="center"
                       prop="beginDate"
                       width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.beginDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账单结束日期"
                       align="center"
                       prop="endDate"
                       width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应收金额"
                       align="center"
                       prop="receivableAmount" />
      <el-table-column label="实收金额"
                       align="center"
                       prop="payAmount" />
      <el-table-column label="结清状态"
                       align="center"
                       prop="payState">
        <template slot-scope="scope">
          <span>{{
            scope.row.payState === "0"
              ? "待支付"
              : scope.row.payState === "1"
              ? "部分支付"
              : scope.row.payState === "2"
              ? "已支付"
              : "暂无"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账单状态"
                       align="center"
                       prop="billState">
        <template slot-scope="scope">
          <span>{{
            scope.row.billState === "0"
              ? "执行中"
              : scope.row.billState === "1"
              ? "已作废"
              : scope.row.billState === "2"
              ? "已过期"
              : "暂无"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="截止日期(逾期产生违约费)"
                       align="center"
                       prop="deadline"
                       width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.deadline, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right"
                       label="操作"
                       align="center"
                       class-name="small-padding fixed-width"
                       width="400">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
                     v-hasPermi="['energy:sfBill:edit']">修改</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
                     v-hasPermi="['energy:sfBill:remove']">删除</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-document-checked"
                     @click="showReOkFn(scope.row)"
                     v-hasPermi="['energy:sfBill:reOk']">账单确认</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-document-checked"
                     @click="handleZhifu(scope.row)"
                     v-hasPermi="['energy:sfBill:pay']">收款</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-document-delete"
                     @click="handleTui(scope.row)"
                     v-hasPermi="['energy:sfBill:reback']">退款</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-document-delete"
                     @click="handleDamagesDetail(scope.row)"
                     v-hasPermi="['energy:sfBill:reback']">缴费明细</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleDamages(scope.row)"
                     v-hasPermi="['energy:sfBill:edit']">违约金</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList" />

    <!-- 添加或修改应收账单对话框 -->
    <el-dialog :title="title"
               :visible.sync="open"
               width="700px"
               append-to-body>
      <el-form size="small"
               ref="form"
               :model="form"
               :rules="rules"
               label-width="100px">
        <el-form-item label="账单编号"
                      prop="billNum">
          <el-input disabled
                    v-model="form.billNum"
                    placeholder="请输入账单编号" />
        </el-form-item>
        <el-form-item label="企业名称"
                      prop="enterpriseName">
          <el-input disabled
                    v-model="form.enterpriseName"
                    placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item label="费用类型"
                      prop="feeTypeName">
          <el-input disabled
                    v-model="form.feeTypeName"
                    placeholder="请输入费用类型" />
        </el-form-item>

        <el-form-item label="账单起始日期"
                      prop="beginDate">
          <el-date-picker clearable
                          size="small"
                          v-model="form.beginDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择账单起始日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="账单结束日期"
                      prop="endDate">
          <el-date-picker clearable
                          size="small"
                          v-model="form.endDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择账单结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收款账户"
                      prop="receiptAccount">
          <el-select v-model="form.receiptAccount" style="width: 180px;">
            <el-option :value="item.acName" :label="item.acName" v-for="(item,index) in accountOptions" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <div v-if='leasingFlag'>
          <el-form-item label="租赁面积"
                        prop="totalArea">
            <el-input v-model="form.totalArea"
                      placeholder="请输入租赁面积" />
          </el-form-item>
          <el-form-item label="租赁单价"
                        prop="unitPrice">
            <el-input v-model="form.unitPrice"
                      placeholder="请输入租赁单价" />
          </el-form-item>

        </div>
        <div v-else>
          <div class="zhifucon"
               v-if="!leasingFlag&&form.waterMeterBills">
            <div class="item">
              <span>水费：</span>
            </div>
          </div>
          <el-table :data="form.waterMeterBills" v-if="!leasingFlag&&form.waterMeterBills"
                    style='margin-bottom:15px'>
            <el-table-column label="表号"
                             align="center"
                             show-overflow-tooltip
                             prop="meterNum" width="130px" />
            <el-table-column label="上月底数"
                             align="center"
                             prop="lastValue" />
            <el-table-column label="本月止数"
                             align="center"
                             prop="currentValue" />
            <el-table-column label="读数用量"
                             align="center"
                             prop="actualDosage" />
            <el-table-column label="分摊用量"
                             align="center"
                             prop="shareQuantity" />
            <el-table-column label="单价"
                             align="center"
                             prop="unitPrice" />
            <el-table-column label="费用"
                             align="center"
                             prop="totalAmount" />
          </el-table>

          <div class="zhifucon"
               v-if="!leasingFlag&&form.elMeterBills">
            <div class="item">
              <span>电费：</span>
            </div>
          </div>

          <el-table :data="form.elMeterBills" v-if="!leasingFlag&&form.elMeterBills"
                    style='margin-bottom:15px'>
            <el-table-column label="表号"
                             align="center"
                             show-overflow-tooltip
                             prop="meterNum" width="130px" />
            <el-table-column label="上月底数"
                             align="center"
                             prop="lastValue" />
            <el-table-column label="本月止数"
                             align="center"
                             prop="currentValue" />
            <el-table-column label="读数用量"
                             align="center"
                             prop="actualDosage" />
            <el-table-column label="分摊用量"
                             align="center"
                             prop="shareQuantity" />
            <el-table-column label="单价"
                             align="center"
                             prop="unitPrice" />
            <el-table-column label="费用"
                             align="center"
                             prop="totalAmount" />
          </el-table>


          <!--<el-form-item label="垃圾费"-->
                        <!--prop="garbageFee">-->
            <!--<el-input v-model="form.garbageFee"-->
                      <!--placeholder="请输入垃圾费" />-->
          <!--</el-form-item>-->

          <!--<el-form-item label="污水处理"-->
                        <!--prop="sewageFee">-->
            <!--<el-input v-model="form.sewageFee"-->
                      <!--placeholder="请输入污水处理费" />-->
          <!--</el-form-item>-->
          <!--<el-form-item label="电梯运行"-->
                        <!--prop="elevatorRunFee">-->
            <!--<el-input v-model="form.elevatorRunFee"-->
                      <!--placeholder="请输入电梯运行费" />-->
          <!--</el-form-item>-->
          <!--<el-form-item label="电梯维修"-->
                        <!--prop="elevatorRepairFee">-->
            <!--<el-input v-model="form.elevatorRepairFee"-->
                      <!--placeholder="请输入电梯维修费" />-->
          <!--</el-form-item>-->
        </div>
        <el-form-item label="应收金额"
                      prop="receivableAmount">
          <el-input v-model="form.receivableAmount"
                    placeholder="请输入应收金额" />
        </el-form-item>
        <el-form-item label="违约金额"
                      prop="totalFine">
          <el-input v-model="form.totalFine"
                    placeholder="请输入违约金额" />
        </el-form-item>
        <el-form-item label="实收金额"
                      prop="payAmount">
          <el-input v-model="form.payAmount"
                    placeholder="请输入实收金额" />
        </el-form-item>
        <el-form-item label="结清状态"
                      prop="payState">
          <el-select v-model="form.payState"
                     placeholder="请选择结清状态"
                     clearable
                     size="small">
            <el-option label="待支付"
                       value="0" />
            <el-option label="部分支付"
                       value="1" />
            <el-option label="已支付"
                       value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="账单状态"
                      prop="billState">
          <el-select v-model="form.billState"
                     placeholder="请选择账单状态"
                     clearable
                     size="small">
            <el-option label="执行中"
                       value="0" />
            <el-option label="已作废"
                       value="1" />
            <el-option label="已过期"
                       value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="费用内容">
          <el-input type="textarea"
                    v-model="form.feeContent"
                    placeholder="请输入费用内容" />

        </el-form-item>
        <el-form-item label="截止日期"
                      prop="deadline">
          <el-date-picker clearable
                          size="small"
                          v-model="form.deadline"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择截止日期(逾期产生违约费)">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="备注"
                      prop="remark">
          <el-input v-model="form.remark"
                    type="textarea"
                    placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



    <!-- 添加或修改收款明细对话框支付 -->
    <el-dialog :title="leasingFlag?'企业租金账单':'企业水电费账单'"
               :visible.sync="zhiOpen"
               width="700px"
               center
               append-to-body>
      <el-form ref="zhiForm"
               :model="zhiForm"
               :rules="zhiRules"
               label-width="80px">
        <div class="zhifucon">
          <div class="item">
            <span>编号：</span>
            <span>{{form.billNum}}</span>
          </div>
          <div class="item">
            <span>企业名称：</span>
            <span>{{form.enterpriseName}}</span>
          </div>
          <div class="item">
            <span>费用周期：</span>
            <span>{{form.beginDate}}至{{form.endDate}}</span>
          </div>
          <div class="item">
            <span>账单类型：</span>
            <span>{{form.feeTypeName}}</span>
          </div>
        </div>
        <div class="zhifucon"
             v-if="leasingFlag">
          <div class="item">
            <span>租赁面积：</span>
            <span>{{form.totalArea}}</span>
          </div>
          <div class="item">
            <span>租赁单价：</span>
            <span>{{form.unitPrice}}</span>
          </div>

        </div>
        <div class="zhifucon"
             v-if="!leasingFlag&&form.waterMeterBills">
          <div class="item">
            <span>水费：</span>
          </div>
        </div>
        <el-table :data="form.waterMeterBills" v-if="!leasingFlag&&form.waterMeterBills"
                  style='margin-bottom:15px'>
          <el-table-column label="表号"
                           align="center"
                           show-overflow-tooltip
                           prop="meterNum" width="130px" />
          <el-table-column label="上月底数"
                           align="center"
                           prop="lastValue" />
          <el-table-column label="本月止数"
                           align="center"
                           prop="currentValue" />
          <el-table-column label="读数用量"
                           align="center"
                           prop="actualDosage" />
          <el-table-column label="分摊用量"
                           align="center"
                           prop="shareQuantity" />
          <el-table-column label="单价"
                           align="center"
                           prop="unitPrice" />
          <el-table-column label="费用"
                           align="center"
                           prop="totalAmount" />
        </el-table>

        <div class="zhifucon"
             v-if="!leasingFlag&&form.elMeterBills">
          <div class="item">
            <span>电费：</span>
          </div>
        </div>

        <el-table :data="form.elMeterBills" v-if="!leasingFlag&&form.elMeterBills"
                  style='margin-bottom:15px'>
          <el-table-column label="表号"
                           align="center"
                           show-overflow-tooltip
                           prop="meterNum" width="130px" />
          <el-table-column label="上月底数"
                           align="center"
                           prop="lastValue" />
          <el-table-column label="本月止数"
                           align="center"
                           prop="currentValue" />
          <el-table-column label="读数用量"
                           align="center"
                           prop="actualDosage" />
          <el-table-column label="分摊用量"
                           align="center"
                           prop="shareQuantity" />
          <el-table-column label="单价"
                           align="center"
                           prop="unitPrice" />
          <el-table-column label="费用"
                           align="center"
                           prop="totalAmount" />
        </el-table>

        <div class="zhifucon"
             v-if="!leasingFlag">

          <div class="item">
            <span>垃圾：</span>
            <span>{{form.garbageFee}}</span>
          </div>
          <div class="item">
            <span>污水处理：</span>
            <span>{{form.sewageFee}}</span>
          </div>
          <div class="item">
            <span>电梯运行：</span>
            <span>{{form.elevatorRunFee}}</span>
          </div>
          <div class="item">
            <span>电梯维修：</span>
            <span>{{form.elevatorRepairFee}}</span>
          </div>
        </div>

        <div class="zhifucon">
          <div class="item">
            <span>收款账户：</span>
            <span>{{form.receiptAccount}}</span>
          </div>
          <div class="item">
            <span>应收费用：</span>
            <span>{{form.receivableAmount}}</span>
          </div>
          <div class="item">
            <span>应收违约金：</span>
            <span>{{form.totalFine}}</span>
          </div>
          <div class="item">
            <span>已收金额：</span>
            <span>{{form.payAmount}}</span>
          </div>
          <div class="item">
            <span>收款方式:</span>
            <span>
              <el-input size="small"
                        v-model="zhiForm.receiptMethod"
                        placeholder="请输入收款方式" />
            </span>
          </div>
          <div class="item">
            <span>收款时间:</span>
            <span>
              <el-date-picker clearable
                              size="small"
                              v-model="zhiForm.receiptTime"
                              type="date"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择收款时间">
              </el-date-picker>
            </span>
          </div>
          <div class="item">
            <span>收款金额:</span>
            <span>
              <el-input size="small"
                        v-model="zhiForm.receiptAmount"
                        placeholder="请输入收款金额" />
            </span>
          </div>

        </div>

      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitFormZhi">确 定</el-button>
        <el-button @click="cancelZhi">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 账单确认 -->
    <el-dialog :title="leasingFlag?'企业租金账单确认':'企业水电费账单确认'"
               :visible.sync="showReOk"
               width="700px"
               center
               append-to-body>
      <el-form ref="zhiForm"
               :model="zhiForm"
               :rules="zhiRules"
               label-width="80px">
        <div class="zhifucon">
          <div class="item">
            <span>编号：</span>
            <span>{{form.billNum}}</span>
          </div>
          <div class="item">
            <span>企业名称：</span>
            <span>{{form.enterpriseName}}</span>
          </div>
          <div class="item">
            <span>费用周期：</span>
            <span>{{form.beginDate}}至{{form.endDate}}</span>
          </div>
          <div class="item">
            <span>账单类型：</span>
            <span>{{form.feeTypeName}}</span>
          </div>
        </div>
        <div class="zhifucon"
             v-if="leasingFlag">
          <div class="item">
            <span>租赁面积：</span>
            <span>{{form.totalArea}}</span>
          </div>
          <div class="item">
            <span>租赁单价：</span>
            <span>{{form.unitPrice}}</span>
          </div>

        </div>

        <div class="zhifucon"
             v-if="!leasingFlag&&form.waterMeterBills">
          <div class="item">
            <span>水费：</span>
          </div>
        </div>

        <el-table :data="form.waterMeterBills" v-if="!leasingFlag&&form.waterMeterBills"
                  style='margin-bottom:15px'>
          <el-table-column label="表号"
                           align="center"
                           show-overflow-tooltip
                           prop="meterNum" width="130px" />
          <el-table-column label="上月底数"
                           align="center"
                           prop="lastValue" />
          <el-table-column label="本月止数"
                           align="center"
                           prop="currentValue" />
          <el-table-column label="读数用量"
                           align="center"
                           prop="actualDosage" />
          <el-table-column label="分摊用量"
                           align="center"
                           prop="shareQuantity" />
          <el-table-column label="单价"
                           align="center"
                           prop="unitPrice" />
          <el-table-column label="费用"
                           align="center"
                           prop="totalAmount" />
        </el-table>

        <div class="zhifucon"
             v-if="!leasingFlag&&form.elMeterBills">
          <div class="item">
            <span>电费：</span>
          </div>
        </div>

        <el-table :data="form.elMeterBills" v-if="!leasingFlag&&form.elMeterBills"
                  style='margin-bottom:15px'>
          <el-table-column label="表号"
                           align="center"
                           show-overflow-tooltip
                           prop="meterNum" width="130px" />
          <el-table-column label="上月底数"
                           align="center"
                           prop="lastValue" />
          <el-table-column label="本月止数"
                           align="center"
                           prop="currentValue" />
          <el-table-column label="读数用量"
                           align="center"
                           prop="actualDosage" />
          <el-table-column label="分摊用量"
                           align="center"
                           prop="shareQuantity" />
          <el-table-column label="单价"
                           align="center"
                           prop="unitPrice" />
          <el-table-column label="费用"
                           align="center"
                           prop="totalAmount" />
        </el-table>


        <div class="zhifucon"
             v-if="!leasingFlag">

          <div class="item">
            <span>垃圾费：</span>
            <span>{{form.garbageFee}}</span>
          </div>
          <div class="item">
            <span>污水处理费：</span>
            <span>{{form.sewageFee}}</span>
          </div>
          <div class="item">
            <span>电梯运行费：</span>
            <el-input  style="width: 180px;" v-model="form.elevatorRunFee"  placeholder="请输入电梯运行费"></el-input>
          </div>
          <div class="item">
            <span>电梯维修费：</span>
            <el-input  style="width: 180px;" v-model="form.elevatorRepairFee"  placeholder="请输入电梯维修费"></el-input>
          </div>
          <div class="item">
            <span>收款账户：</span>
            <el-select v-model="form.receiptAccount" style="width: 180px;">
              <el-option :value="item.acName" :label="item.acName" v-for="(item,index) in accountOptions" :key="index"></el-option>
            </el-select>
          </div>
          <div class="item">
            <span>应收费用：</span>
            <span>{{form.allRelFee||form.receivableAmount}}</span>
          </div>
        </div>

        <div class="zhifucon">

          <div class="item">
            <span>应收违约金：</span>
            <span>{{form.totalFine}}</span>
          </div>

          <!--          <div class="item">-->
<!--            <span>应收违约金：</span>-->
<!--            <span>{{form.totalFine}}</span>-->
<!--          </div>-->
          <div class="item">
            <span>已收金额：</span>
            <span>{{form.payAmount}}</span>
          </div>

        </div>

      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="reOkSubmit">确定并打印</el-button>
        <el-button @click="cancelZhi">取 消</el-button>
      </div>
    </el-dialog>



    <!-- 添加或修改退款明细对话框 -->
    <el-dialog title="添加退款明细"
               :visible.sync="tuiOpen"
               width="500px"
               append-to-body>
      <el-form ref="tuiForm"
               :model="tuiForm"
               :rules="tuiRules"
               label-width="80px">

        <el-form-item label="退款方式"
                      prop="refundMethod">
          <el-input v-model="tuiForm.refundMethod"
                    placeholder="请输入退款方式" />
        </el-form-item>
        <el-form-item label="退款金额"
                      prop="refundAmount">
          <el-input v-model="tuiForm.refundAmount"
                    placeholder="请输入退款金额" />
        </el-form-item>
        <el-form-item label="退款时间"
                      prop="refundTime">
          <el-date-picker clearable
                          size="small"
                          v-model="tuiForm.refundTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择退款时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收款人"
                      prop="payee">
          <el-input v-model="tuiForm.payee"
                    placeholder="请输入收款人" />
        </el-form-item>
        <el-form-item label="备注"
                      prop="remark">
          <el-input v-model="tuiForm.remark"
                    type="textarea"
                    placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitFormTui">确 定</el-button>
        <el-button @click="cancelTui">取 消</el-button>
      </div>
    </el-dialog>


    <PrintCom @click="closePrint" v-if="showPrint" @close="printClose()">
      <div class="print-box">
        <div class="print-box-t">{{ form.enterpriseName }}租赁户水、电费用表（{{ parseTime(form.feeCycle,"{y}年{m}月") }})</div>
        <div class="print-box-st">
          <span>租赁户:{{ form.enterpriseName }}</span>
          <span>制表时间:{{parseTime(new Date(),"{y}年{m}月{d}日")  }}</span>
        </div>
        <div class="print-box-c">
          <div class="table_col table_t">
            <div class="table_col_a">
              序号
            </div>
            <div class="table_col_b">
              <div class="table_col_b_a">水</div>
              <div class="table_col_b_b">
                <span>上月<br>读数</span>
                <span>本月<br>止数</span>
                <span>读数<br>用量<br>(吨)</span>
                <span>分摊<br>吨数</span>
                <span>单价<br>(元)</span>
                <span>水费<br>(元)</span>
              </div>
            </div>
            <div class="table_col_c">
              <div class="table_col_b_a">电</div>
              <div class="table_col_b_b">
                <span>上月<br>读数</span>
                <span>本月<br>止数</span>
                <span>倍数</span>
                <span>读数<br>用量<br>(度)</span>
                <span>分摊<br>电量</span>
                <span>单价<br>(元)</span>
                <span>电费<br>(元)</span>
              </div>
            </div>
            <div class="table_col_d">
              <div class="table_col_d_t">
                <span>垃圾</span>
                <span class="dt-tow">电梯</span>
                <span>违约金</span>
                <span>污水<br>处理</span>
              </div>
              <div class="table_col_d_b" style="border-top: 1px solid #666">
                <span>垃圾<br>费<br>(元)</span>
                <span>运行费<br>(元)</span>
                <span>维修费<br>(元)</span>
                <span>违约金<br>(元)</span>
                <span>污水<br>处理费<br>(元)</span>
              </div>
            </div>

            <div class="table_col_e">
              合计<br>(元)
            </div>
          </div>

          <div class="table_col" v-for="(item,index) in printList" :key="index" >
            <div class="col-c-box">
              {{ index+1 }}
            </div>
            <div class="col-c-box">
              <span>{{item.wlastValue}}</span>
              <span>{{item.wcurrentValue}}</span>
              <span>{{item.wactualDosage}}</span>
              <span>{{item.wshareQuantity}}</span>
              <span>{{item.wunitPrice}}</span>
              <span>{{item.wtotalAmount}}</span>
            </div>
            <div class="col-c-box">
              <span>{{item.elastValue}}</span>
              <span>{{item.ecurrentValue}}</span>
              <span>{{item.emagnification}}</span>
              <span>{{item.eactualDosage}}</span>
              <span>{{item.eshareQuantity}}</span>
              <span>{{item.eunitPrice}}</span>
              <span>{{item.etotalAmount}}</span>
            </div>
            <div class="col-c-box">
              <span>{{index==0?form.garbageFee:''}}</span>
              <span>{{index==0?form.elevatorRunFee:''}}</span>
              <span>{{index==0?form.elevatorRepairFee:''}}</span>
              <span>{{index==0?form.totalFine:''}}</span>
              <span>{{index==0?form.sewageFee:''}}</span>
            </div>
            <div class="col-c-box">

            </div>
          </div>

          <div class="table_col">
            <div class="col-c-box">
              小计
            </div>
            <div class="col-c-box">
              <span></span>
              <span></span>
              <span>{{ wactualDosageTal }}</span>
              <span>{{wshareQuantityTal.toFixed(2)  }}</span>
              <span></span>
              <span>{{wtotalAmountTal.toFixed(1)}}</span>
            </div>
            <div class="col-c-box">
              <span></span>
              <span></span>
              <span></span>
              <span>{{ eactualDosageTal }}</span>
              <span>{{ ewshareQuantityTal }}</span>
              <span></span>
              <span>{{ewtotalAmountTal}}</span>
            </div>
            <div class="col-c-box">
              <span>{{form.garbageFee}}</span>
              <span>{{form.elevatorRunFee}}</span>
              <span>{{form.elevatorRepairFee}}</span>
              <span>{{form.totalFine}}</span>
              <span>{{form.sewageFee}}</span>
            </div>
            <div class="col-c-box">
              {{form.allRelFee||form.receivableAmount}}
            </div>
          </div>


          <div class="table_col tb-b">
            <div class="col-c-box">
              {{ form.receiptAccount }}
            </div>
            <div class="col-c-box">
              <span>账号</span>
              <span> {{ getAccountInfo(form.receiptAccount).acCode }}</span>
              <span>开户行</span>
            </div>
            <div class="col-c-box">
              <span>{{ getAccountInfo(form.receiptAccount).depositBank }}</span>
            </div>
          </div>

        </div>

        <div style="position: absolute;bottom:20px;left: 20px;width: 100%;padding-top: 14px;">
          确认人：
        </div>
      </div>
    </PrintCom>
  </div>
</template>

<script>
import {
  listSfBill,
  getSfBill,
  delSfBill,
  addSfBill,
  updateSfBill,
} from '@/api/smartParks/operatingFee/operatingFeeReceivable'
import { listSysBillAccount} from "@/api/life/sysBillAccount";
import { listSfFee } from '@/api/smartParks/operatingFee/operatingFeeBasis'
import {
  listSfReceiptDetail,
  getSfReceiptDetail,
  delSfReceiptDetail,
  addSfReceiptDetail,
  updateSfReceiptDetail,
} from '@/api/smartParks/operatingFee/operatingFeePayment'



import {
  listSfRefundDetail,
  getSfRefundDetail,
  delSfRefundDetail,
  addSfRefundDetail,
  updateSfRefundDetail,
} from '@/api/smartParks/operatingFee/operatingFeeRefund'
export default {
  name: 'feeWaterAndEl',
  components: {},
  data() {
    return {
      accountOptions:[],
      tabActiveName:'1',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      showPrint:false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 应收账单表格数据
      feBillList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        billNum: null,
        enterprisePersonal: null,
        enterpriseName: null,
        personalName: null,
        feeId: null,
        beginDate: null,
        endDate: null,
        receivableAmount: null,
        payAmount: null,
        tenantId: null,
        billState: null,
        payState: 0,
        feeType:'10'
      },
      wactualDosageTal:0,//水费读数用量总计
      wshareQuantityTal:0,//水费分摊用量总计
      wtotalAmountTal:0,//水费总计
      eactualDosageTal:0,//电费读数用量总计
      ewshareQuantityTal:0,//电费分摊用量总计
      ewtotalAmountTal:0,//电费总计
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        delFlag: [
          {
            required: true,
            message: '删除标志(0正常 1删除)不能为空',
            trigger: 'blur',
          },
        ],
      },
      zhiOpen: false,
      showReOk:false,//显示账单确认
      zhiForm: {},
      zhiRules: {},
      tuiOpen: false,
      tuiForm: {},
      tuiRules: {},
      leasingFlag: true,
      feeDetail: [],
      printList:[]
    }
  },
  created() {
    this.getList()
    listSysBillAccount().then(res=>{
      console.log("res",res)
      let data=res.rows
      this.accountOptions=data
    })
  },
  methods: {
    /** 查询应收账单列表 */
    getList() {
      this.loading = true
      listSfBill(this.queryParams).then((response) => {
        this.feBillList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    closePrint(){
      this.showPrint=false
    },
    getAccountInfo(val){
      let ac=this.getDictObj(this.accountOptions,val,'acName','depositBank')
      if (this.isEmpty(ac)){
        return {
          acCode:'',
          depositBank:''
        }
      }else {
        return  ac
      }
    },
    handleDamagesDetail(row) {
      this.$router.push({
        name: 'OperatingFeePayment',
        query: { id: row.billNum },
      })
    },
    handleDamages(row) {
      this.$router.push({
        name: 'Damages',
        query: { id: row.id },
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        billNum: null,
        enterpriseId: null,
        feeType: '10',
        beginDate: null,
        feeTypeName: null,
        endDate: null,
        receivableAmount: null,
        payAmount: null,
        payState: null,
        billState: null,
        feeContent: null,
        deadline: null,
        createBy: null,
        recordId: null,
        createTime: null,
        totalArea: null,
        updateBy: null,
        unitPrice: null,
        updateTime: null,
        surety: null,
        remark: null,
        quantity: null,
        delFlag: null,
        checkMeterId: null,
        actualDosage: null,
        feeAmount: null,
        shareCoefficient: null,
        shareQuantity: null,
        shareAmount: null,
      }
      this.feeDetail = []
      this.resetForm('form')
    },
    showReOkFn(row){
      this.reset()
      getSfBill(row.id).then((response) => {
        this.form = response.data
        if (
          this.form.feeTypeName === '水电费' ||
          this.form.feeTypeName === '水费' ||
          this.form.feeTypeName === '电费'
        ) {
          this.form.allRelFee=parseFloat(response.data.receivableAmount) +parseFloat(response.data.elevatorRepairFee) +parseFloat(response.data.elevatorRunFee)
          console.log("this.form.allRelFee",this.form.allRelFee)
          this.leasingFlag = false
        } else {
          this.leasingFlag = true
        }
        this.feeDetail.push({
          checkMeterId: this.form.checkMeterId,
          lastValue: this.form.lastValue,
          currentValue: this.form.currentValue,
          actualDosage: this.form.actualDosage,
          shareQuantity: this.form.shareQuantity,
          unitPrice: this.form.unitPrice,
          total: Number(this.form.feeAmount) + Number(this.form.shareAmount),
        })
        this.showReOk = true
        this.resetZhi()
        this.zhiForm.billId = row.id
      })
    },
    handleZhifu(row) {
      this.reset()
      getSfBill(row.id).then((response) => {
        this.form = response.data
        if (
          this.form.feeTypeName === '水电费' ||
          this.form.feeTypeName === '电费'||
          this.form.feeTypeName === '水费'
        ) {
          this.leasingFlag = false
        } else {
          this.leasingFlag = true
        }
        this.feeDetail.push({
          checkMeterId: this.form.checkMeterId,
          lastValue: this.form.lastValue,
          currentValue: this.form.currentValue,
          actualDosage: this.form.actualDosage,
          shareQuantity: this.form.shareQuantity,
          unitPrice: this.form.unitPrice,
          total: Number(this.form.feeAmount) + Number(this.form.shareAmount),
        })
        this.zhiOpen = true
        this.resetZhi()
        this.zhiForm.billId = row.id
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getSfBill(id).then((response) => {
        this.form = response.data
        if (
          this.form.feeTypeName === '水电费' ||
          this.form.feeTypeName === '水费' ||
          this.form.feeTypeName === '电费'
        ) {
          this.leasingFlag = false
        } else {
          this.leasingFlag = true
        }
        this.feeDetail.push({
          checkMeterId: this.form.checkMeterId,
          lastValue: this.form.lastValue,
          currentValue: this.form.currentValue,
          actualDosage: this.form.actualDosage,
          shareQuantity: this.form.shareQuantity,
          unitPrice: this.form.unitPrice,
          total: Number(this.form.feeAmount) + Number(this.form.shareAmount),
        })
        this.open = true
        this.title = '修改水电费账单'
      })
    },
    tabClick(tab,par){
      let panName=tab.paneName
      if (panName=='1'){
        this.queryParams.payState=0
      }else if (panName=='2'){
        this.queryParams.payState=1
      }else if (panName=='2'){
        this.queryParams.payState=2
      }else {
        this.queryParams.payState=null
      }
      this.getList()
    },
    submitFormZhi() {
      this.$refs['zhiForm'].validate((valid) => {
        if (valid) {
          if (this.zhiForm.id != null) {
            updateSfReceiptDetail(this.zhiForm).then((response) => {
              this.msgSuccess('修改成功')
              this.zhiOpen = false
              this.getList()
            })
          } else {
            addSfReceiptDetail(this.zhiForm).then((response) => {
              this.msgSuccess('新增成功')
              this.zhiOpen = false
            })
          }
        }
      })
    },
    cancelZhi() {
      this.showPrint = false
      this.zhiOpen = false;
      this.resetZhi()
    },
    // 表单重置
    resetZhi() {
      this.zhiForm = {
        id: null,
        billId: null,
        receiptMethod: null,
        receiptAmount: null,
        receiptTime: null,
        arrivalTime: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        tenantId: null,

        receiptAccount: null,
        garbageFee: null,
        sewageFee: null,
        elevatorRepairFee: null,
        elevatorRunFee: null,
        totalFine: null,
      }
      this.resetForm('zhiForm')
    },
    handleTui(row) {
      this.tuiOpen = true
      this.resetTui()
      this.tuiForm.billId = row.id
    },
    cancelTui() {
      this.tuiOpen = false
      this.resetTui()
    },
    resetTui() {
      this.tuiForm = {
        id: null,
        billId: null,
        refundMethod: null,
        refundAmount: null,
        refundTime: null,
        payee: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        tenantId: null,
      }
      this.resetForm('tuiForm')
    },
    submitFormTui() {
      this.$refs['tuiForm'].validate((valid) => {
        if (valid) {
          if (this.tuiForm.id != null) {
            updateSfRefundDetail(this.tuiForm).then((response) => {
              this.msgSuccess('修改成功')
              this.tuiOpen = false
              this.getList()
            })
          } else {
            addSfRefundDetail(this.tuiForm).then((response) => {
              this.msgSuccess('新增成功')
              this.tuiOpen = false
              this.getList()
            })
          }
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams={
        pageNum: 1,
        pageSize: 10,
        billNum: null,
        enterprisePersonal: null,
        enterpriseName: null,
        personalName: null,
        feeId: null,
        beginDate: null,
        endDate: null,
        receivableAmount: null,
        payAmount: null,
        tenantId: null,
        billState: null,
        payState: 0,
        feeType:'水电费'
      }
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加应收账单'
    },
    printClose(){
      this.printList=[]
      this.showPrint=false
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.actualDosage = this.feeDetail.actualDosage
          this.form.shareQuantity = this.feeDetail.shareQuantity
          this.form.unitPrice = this.feeDetail.unitPrice
          if (this.form.id != null) {
            updateSfBill(this.form).then((response) => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addSfBill(this.form).then((response) => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    reOkSubmit(){
      updateSfBill(this.form).then((response) => {
        this.showReOk = false
        if (this.form.elMeterBills.length>0){
          this.form.feeCycle=this.form.elMeterBills[0].feeCycle
        }else if(this.form.waterMeterBills.length>0){
          this.form.feeCycle=this.form.waterMeterBills[0].feeCycle
        }
        let waterList=this.form.waterMeterBills
        let elList=this.form.elMeterBills
        if (waterList.length<1&&elList.length<1){
          return this.getList()
        }
        let wactualDosageTal=0//水费读数用量总计
        let wshareQuantityTal=0//水费分摊用量总计
        let wtotalAmountTal=0//水费总计
        let eactualDosageTal=0//电费读数用量总计
        let ewshareQuantityTal=0//电费分摊用量总计
        let ewtotalAmountTal=0//电费总计
        if (waterList.length>elList.length){
          console.log(111)
          for (let i=0;i<waterList.length;i++){
            let obj={
              wlastValue:'',
              wcurrentValue:'',
              wactualDosage:'',//读数用量
              wshareQuantity:'',//分摊量
              wunitPrice:'',//单价
              wtotalAmount:'',//总价
              emagnification:'',//倍率
              elastValue:'',
              ecurrentValue:'',
              eactualDosage:'',//读数用量
              eshareQuantity:'',//分摊量
              eunitPrice:'',//单价
              etotalAmount:'',//总价
            }
            if (i<elList.length){
              obj.elastValue=elList[i].lastValue
              obj.ecurrentValue=elList[i].currentValue
              obj.eshareQuantity=elList[i].shareQuantity
              obj.eactualDosage=elList[i].actualDosage
              obj.eunitPrice=elList[i].unitPrice
              obj.etotalAmount=elList[i].totalAmount
              obj.emagnification=elList[i].magnification
              eactualDosageTal+=parseFloat(elList[i].actualDosage)
              ewshareQuantityTal+=parseFloat(elList[i].shareQuantity)
              ewtotalAmountTal+=parseFloat(elList[i].totalAmount)
            }
            obj.wlastValue=waterList[i].lastValue
            obj.wcurrentValue=waterList[i].currentValue
            obj.wactualDosage=waterList[i].actualDosage
            obj.wshareQuantity=waterList[i].shareQuantity
            obj.wunitPrice=waterList[i].unitPrice
            obj.wtotalAmount=waterList[i].totalAmount

            wactualDosageTal+=parseFloat(waterList[i].actualDosage)
            wshareQuantityTal+=parseFloat(waterList[i].shareQuantity)
            wtotalAmountTal+=parseFloat(waterList[i].totalAmount)
            this.printList.push(obj)
          }
        }else {
          console.log(222)
          for (let i=0;i<waterList.length;i++){
            let obj={
              wlastValue:'',
              wcurrentValue:'',
              wactualDosage:'',//读数用量
              wshareQuantity:'',//分摊量
              wunitPrice:'',//单价
              wtotalAmount:'',//总价
              emagnification:'',//倍率
              elastValue:'',
              ecurrentValue:'',
              eactualDosage:'',//读数用量
              eshareQuantity:'',//分摊量
              eunitPrice:'',//单价
              etotalAmount:'',//总价
            }
            if (i<waterList.length){
              obj.wlastValue=waterList[i].lastValue
              obj.wcurrentValue=waterList[i].currentValue
              obj.wactualDosage=waterList[i].actualDosage
              obj.wshareQuantity=waterList[i].shareQuantity
              obj.wunitPrice=waterList[i].unitPrice
              obj.wtotalAmount=waterList[i].totalAmount

              wactualDosageTal+=parseFloat(waterList[i].actualDosage)
              wshareQuantityTal+=parseFloat(waterList[i].shareQuantity)
              wtotalAmountTal+=parseFloat(waterList[i].totalAmount)
            }
            obj.elastValue=elList[i].lastValue
            obj.ecurrentValue=elList[i].currentValue
            obj.eshareQuantity=elList[i].shareQuantity
            obj.eactualDosage=elList[i].actualDosage
            obj.eunitPrice=elList[i].unitPrice
            obj.etotalAmount=elList[i].totalAmount
            obj.emagnification=elList[i].magnification

            eactualDosageTal+=parseFloat(elList[i].actualDosage)
            ewshareQuantityTal+=parseFloat(elList[i].shareQuantity)
            ewtotalAmountTal+=parseFloat(elList[i].totalAmount)
            this.printList.push(obj)
          }
        }
        this.wactualDosageTal=wactualDosageTal//水费读数用量总计
        this.wshareQuantityTal=wshareQuantityTal//水费分摊用量总计
        this.wtotalAmountTal=wtotalAmountTal//水费总计
        this.eactualDosageTal=eactualDosageTal//电费读数用量总计
        this.ewshareQuantityTal=ewshareQuantityTal//电费分摊用量总计
        this.ewtotalAmountTal=ewtotalAmountTal//电费总计
        console.log("this.printList",this.printList)
        this.showPrint=true
        this.getList()
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$confirm(
        '是否确认删除应收账单编号为"' + ids + '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(function () {
          return delSfBill(ids)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'energy/sfBill/export',
        {
          ...this.queryParams,
        },
        `energy_sfBill.xlsx`
      )
    },
  },
}
</script>
<style scoped lang="scss" >
.zhifucon {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 50%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    span:first-child {
      flex-shrink: 0;
      width: 30%;
      display: inline-block;
    }
  }
}

.print-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px;
  width: 1123px;
  box-sizing: border-box;

  .print-box-t {
    margin-top: 20px;
    font-weight: 600;
    font-size: 18px;
  }

  .print-box-st {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 30px 0 20px;
  }

  .print-box-c {
    width: 100%;
    background: #fff;
  }

  .bbl-t{
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
    box-sizing: border-box;

  }


  .table_col{
    width: 100%;
    display: flex;
    font-size: 12px;
    div{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .table_col_a{
      width: 4%;
      height: 100%;
      border: 1px solid #666;
      border-right: none;
      writing-mode:tb-rl;
      letter-spacing: 8px;
      padding-top: 8px;
    }
    .table_col_b{
      width: 30%;
      height: 100%;
      display: flex;
      border: none;
      flex-direction: column;
      border: 1px solid #666;
      .table_col_b_b{
        //border: 1px solid #666;
        border-top: 1px solid #666;
      }
    }


    .table_col_b_a{
      width: 100%;
      height: 30px;
    }

    .table_col_b_b{
      width: 100%;
      flex-grow: 1;
      span{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        border-right: 1px solid #666;
        &:last-child{
          border-right: none;
        }
      }
    }

    .table_col_d_b{
      width: 100%;
      flex-grow: 1;
      span{
        width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 100%;
        border-right: 1px solid #666;
        &:last-child{
          border-right: none;
        }
      }
    }

    .table_col_c{
      width: 36%;
      display: flex;
      flex-direction: column;
      height: 100%;
      border: 1px solid #666;
      border-left: none;

      .table_col_b_b{
        border-top: 1px solid #666;
      }
    }
    .table_col_d{
      width: 22%;
      height: 100%;
      border: 1px solid #666;
      border-left: none;
      display: flex;
      flex-direction: column;

      .table_col_d_t{
        width: 100%;
        height: 30px;
        span{
          display: flex;
          width: 20%;
          height: 100%;
          align-items: center;
          justify-content: center;
          border-right: 1px solid #666;
          &:last-child{
            border-right: none;
          }
        }

      }

      .table_col_d_b{
        width: 100%;
        flex-grow: 1;
        border-top: 1px solid #666;
      }

      span{
        width: 25%;
      }

    }


    .table_col_e{
      width: 8%;
      height: 100%;
      border: 1px solid #666;
      padding-top: 8px;
      text-align: center;
      border-left: none;
    }
  }

  .table_t{
    height: 100px;
  }


  .dt-tow{
    width: 40% !important;
    span{
      width: 50% !important;
    }
  }

  .col-c-box{
    height: 28px;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    span{
      flex: 1;
      height: 100%;
      border-right: 1px solid #666;
      display: flex;
      justify-content: center;
      align-items: center;
      &:last-child{
        border-right: none;
      }
    }
    div{
      box-sizing: border-box;
    }
    &:nth-child(1){
      width:  4%;
      border-left: 1px solid #666;
    }

    &:nth-child(2){
      width: 30%;
    }
    &:nth-child(3){
      width: 36%;
    }
    &:nth-child(4){
      width: 22%;
    }
    &:nth-child(5){
      width: 8%;
    }
  }

  .tb-b{
    height: 50px;
    font-size: 14px;
    .col-c-box{
      height: 100%;
      &:nth-child(1){
        width: 34%;
      }

      &:nth-child(2){
        width: 36%;
        span:nth-child(1){
          flex: 1;
        }
        span:nth-child(2){
          flex: 5.1;
        }
      }
      &:nth-child(3){
        width: 30%;
      }
    }
  }
}


</style>
